/**
* @description: 检修准备
* @author: zhaohui
* @data:2023年6月21日
* @remark:
**/
<template>
	<view class="app-container">
		<nav-bar class="header" back :title="title" @goBack="goBack" />
		<view class="app-content">
			<view class="content">
				<view class="content-title">
					{{setpsTitle}}
				</view>
				<view class="content-steps">
					<setps-consult-view :setpList="setpList" :active="stepActive" @operate="stepsClick" :type="stepType"
						:flowState="initDataParam.flowState">
					</setps-consult-view>
				</view>
				<view class="information" v-if="initDataParam.flowState === '2'">
					<view class="content-title">检修准备确认</view>
					<view class="information-data">
						<view class="information-list" v-for="(item,index) in informationList" :key="index">
							<text>{{item.title}}</text>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="sub-btn-container" v-if="initDataParam.flowState !=='2'">
				<van-button class="submit-btn" block type="info" color="#417ADC" @click="overhaulPopupShow = true">提交
				</van-button>
			</view>
		</view>

		<van-popup v-model="overhaulPopupShow" round position="bottom">
			<view class="popup">
				<view class="popup-top">
					检修准备-去确认
					<van-icon name="cross" @click="overhaulPopupShow = false" />
				</view>

				<van-form ref="popupForm">
					<van-field v-model="subParam.overhaulConfirmResultName" label-width="120px" required
						:rules="[{ required: true, trigger:'onSubmit'}]" input-align="right" clearable label="是否具备实施条件"
						placeholder="请选择" right-icon="arrow" readonly @click-right-icon="showPicker = true" />
					<van-field v-model="subParam.overhaulConfirmStartTime" label-width="120px" required
						:rules="[{ required: true, trigger:'onSubmit'}]" input-align="right" clearable label="计划作业开始时间"
						placeholder="请选择" right-icon="arrow" readonly @click-right-icon="changePlanTime('startTime')" />
					<van-field v-model="subParam.overhaulConfirmEndTime" label-width="120px" required
						:rules="[{ required: true, trigger:'onSubmit'}]" input-align="right" clearable label="计划作业结束时间"
						placeholder="请选择" right-icon="arrow" readonly @click-right-icon="changePlanTime('endTime')" />
					<!-- <van-field class="remark-wrap" v-model="message" rows="1" autosize label="留言" required
					:rules="[{ required: true, trigger:'onSubmit'}]" type="textarea" placeholder="请输入留言" /> -->
					<view class="remark-info-container">
						<span>补充说明</span>
						<van-divider dashed />
						<view class="remark-wrap">
							<van-field error-message-align="right" required
								:rules="[{ required: true, trigger:'onSubmit'}]" type="textarea" class="remark-text"
								v-model="subParam.overhaulConfirmDescription" placeholder="请输入补充说明" />
						</view>
					</view>
				</van-form>
				<text class="popup-notes">注：需负责人确认当前作业内容是否具备现场实施条件，如果是则可进入下一步现场检修作业，如果否则需要修改作业时间，改期执行。</text>
				<view class="popup-bt">
					<van-button class="submit-btn" block type="info" color="#417ADC" @click="popupSubClick">提交
					</van-button>
				</view>
			</view>
		</van-popup>
		<!--区间时间选择-->
		<!-- <van-calendar v-model="timeShow" color="#417ADC" type="multiple" @confirm="onConfirmTime" /> -->
		<van-popup v-model="timeShow" position="bottom" style="width: 100%;">
			<van-datetime-picker v-model="currentDate" @cancel="timeShow = false" type="datetime" title="选择时间"
				@confirm="onConfirmTime" />
		</van-popup>
		<!--实施条件选择-->
		<van-popup v-model="showPicker" position="bottom">
			<van-picker show-toolbar :columns="implementingConditionColumns" @confirm="onConfirmImplementingCondition"
				@cancel="showPicker = false" value-key="name" />
		</van-popup>
	</view>
</template>

<script>
	import navBar from '../common/navBar'
	import setpsConsultView from '../common/stepsConsultView.vue'
	import {
		Dialog,
		Toast
	} from "vant"
	import {
		mapGetters
	} from "vuex";
	import moment from "moment/moment";
	export default {
		name: "maintenancePreparation",
		components: {
			navBar,
			setpsConsultView
		},
		data() {
			return {
				stepType: "maintenancePreparation", //setpsConsultView区分字段
				title: "检修准备",
				setpsTitle: "作业内容",
				situationDescription: "",
				initDataParam: {},
				informationList: [{
					title: "确认人",
					name: ""
				}, {
					title: "确认时间",
					name: ""
				}, {
					title: "确认结果",
					name: ""
				}, {
					title: "计划作业时间",
					name: ""
				}, {
					title: "补充说明",
					name: ""
				}, ],
				overhaulPopupShow: false, //检修弹窗
				subParam: {
					workPlanId: "", //计划id
					consultationDeductionId: "", //检修准备流程节点id
					overhaulConfirmResult: "1", //检修确认结果（1 具备 0不具备）默认是
					overhaulConfirmTime: "", //检修确认时间（时间段）
					overhaulConfirmDescription: "", //检修确认说明
					overhaulConfirmResultName: "",
					overhaulConfirmName: "", //登录人
					overhaulConfirmId: "", //登录人id
					overhaulConfirmStartTime: "", //开始时间
					overhaulConfirmEndTime: "" //结束时间
				}, //提交数据
				timeShow: false, //日历选择器-区间选择
				showPicker: false, //是否具备实施条件
				implementingConditionColumns: [{
					name: "是",
					value: "1"
				}, {
					name: "否",
					value: "0"
				}],
				setpList: [],
				stepActive: "4",
				pushParam: {
					id: "",
					pageFlag: "0", //区分是会商1/检修准备0
				}, //作业内容四项需要的参数
				timeSelectType: "", //筛选弹窗使用startTime，endTime
				currentDate: new Date(),
				// minDate: new Date(),
				// maxDate: null,
				timeSelectType: "", //startTime，endTime
			};
		},
		computed: {
			...mapGetters(["userData"])
		},
		onLoad(option) {
			this.initDataParam = JSON.parse(decodeURIComponent(option.message))
			this.subParam.overhaulConfirmName = this.userData.userName
			this.subParam.overhaulConfirmId = this.userData.userId
			this.subParam.workPlanId = this.initDataParam.id
			this.subParam.consultationDeductionId = this.initDataParam.objId
			this.initData()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			initData() {
				this.$apiRequest.bzhzyApi.selectoverhaul({
					workPlanId: this.initDataParam.id,
					consultationDeductionId: this.initDataParam.objId
				}).then(res => {
					this.setpList = res.data.selectflowContentLogs
					//是否具备实施条件-否，重新赋值
					this.subParam.overhaulConfirmDescription = res.data.overhaulConfirmDescription ? res.data
						.overhaulConfirmDescription : ""
					this.subParam.overhaulConfirmTime = res.data.overhaulConfirmTime ? res.data
						.overhaulConfirmTime : ""
					this.subParam.overhaulConfirmResult = res.data.overhaulConfirmResult ? res.data
						.overhaulConfirmResult : ""
					if (this.subParam.overhaulConfirmTime) {
						this.subParam.overhaulConfirmResultName = res.data.overhaulConfirmResult === 0 ? "否" : "是"

						this.subParam.overhaulConfirmStartTime = this.subParam.overhaulConfirmTime.split(',')[0]
						this.subParam.overhaulConfirmEndTime = this.subParam.overhaulConfirmTime.split(',')[1]
					} else {
						this.subParam.overhaulConfirmResultName = this.subParam.overhaulConfirmResult === 0 ? "否" :
							"是"
						this.subParam.overhaulConfirmStartTime = res.data.selectflowContentLogs[0].selectworkinfo
							.workPlanStrtime
						this.subParam.overhaulConfirmEndTime = res.data
							.selectflowContentLogs[0].selectworkinfo.workPlanEndtime
					}
					//最小时间和最大时间范围：作业信息中计划开始时间~计划结束时间---待定
					// this.minDate = moment(res.data.selectflowContentLogs[0].selectworkinfo
					// 	.workPlanStrtime, 'YYYY-MM-DD HH:mm').toDate()
					// this.maxDate = moment(res.data.selectflowContentLogs[0].selectworkinfo
					// 	.workPlanEndtime, 'YYYY-MM-DD HH:mm').toDate()
					// this.currentDate = moment(res.data.selectflowContentLogs[0].selectworkinfo
					// 	.workPlanStrtime, 'YYYY-MM-DD HH:mm').toDate()
					//弹窗选择是否具备实施条件-是 所需时间
					// this.subParam.overhaulConfirmTime = res.data.selectflowContentLogs[0].selectworkinfo
					// 	.workPlanStrtime + (res
					// 		.data.selectflowContentLogs[0].selectworkinfo.workPlanEndtime ? " - " + res.data
					// 		.selectflowContentLogs[0].selectworkinfo.workPlanEndtime : "")


					this.informationList.map(item => {
						if (item.title === "确认人") {
							item.name = res.data.overhaulConfirmName
						} else if (item.title === "确认时间") {
							item.name = res.data.overhaulConfirmTime
						} else if (item.title === "确认结果") {
							item.name = res.data.overhaulConfirmResult === 1 ? '具备' : '不具备'
						} else if (item.title === "计划作业时间") {
							item.name = res.data.selectflowContentLogs[0].selectworkinfo.workPlanStrtime +
								(res.data.selectflowContentLogs[0].selectworkinfo.workPlanEndtime ?
									'~' + res.data.selectflowContentLogs[0].selectworkinfo
									.workPlanEndtime : "")
						} else if (item.title === "补充说明") {
							item.name = res.data.overhaulConfirmDescription
						}
					})

				})
			},
			/**
			 * @param {Object} data
			 *
			 * buttonState 按钮状态 （0：未完成 、1：已完成）
			 * pageFlag  区分是会商1/检修准备0
			 * tag区分是查看还是编辑
			 */
			stepsClick(data, text) {
				this.pushParam.id = data.consultationDeductionId
				let pushParam = {
					id: data.workPlanId,
					OBJID: data.consultationDeductionId,
					pageFlag: '1',
				}
				if (data.flowName === "作业信息" && text === '查看') {
					// 作业信息查看
					uni.navigateTo({
						url: '/pages/standardizedOperation/meetPreview/jobInfoDetails?pushParam=' +
							encodeURIComponent(JSON.stringify(pushParam))
					})
				} else if (data.flowName === "作业项目" && data.buttonState === 1) {
					// 作业项目查看
					uni.navigateTo({
						url: '/pages/standardizedOperation/jobItem/jobItemDetails?pushParam=' +
							encodeURIComponent(JSON.stringify(pushParam))
					})
				} else if (data.flowName === "危险点分析及预控措施" && data.buttonState === 1) {
					// 危险点分析及预控措施查看
					uni.navigateTo({
						url: '/pages/standardizedOperation/fieldImplementation/dangerDetails/dangerDetails?pushParam=' +
							encodeURIComponent(JSON.stringify(pushParam))
					})
				} else if (data.flowName === "检修备件" && data.buttonState === 1) {
					// 危险点分析及预控措施查看
					uni.navigateTo({
						url: '/pages/standardizedOperation/MaintenanceSpare/details?pushParam=' +
							encodeURIComponent(JSON.stringify(pushParam))
					})
				}
			},
			/**
			 * 检修弹窗提交
			 */
			popupSubClick() {
				this.$refs.popupForm.validate().then(() => {
					Dialog.confirm({
						message: '是否确认提交？',
						confirmButtonColor: "#417ADC"
					}).then(() => {
						this.overhaulPopupShow = false
						this.$apiRequest.bzhzyApi.updateoverhaul(this.subParam).then(res => {
							this.back()
						})
					})
				})
			},

			/**
			 * 计划时间change
			 * 是否具备实施条件   是-不可选择时间（默认作业信息的时间）  否-可以选择时间(清空计划时间)
			 */
			changePlanTime(type) {
				if (this.subParam.overhaulConfirmResult == "0") {
					this.timeShow = true;
					this.timeSelectType = type
				} else {
					this.timeShow = false;
					Toast('是否具备实施条件为"否"时可以修改时间，否则不可修改时间')
				}
			},
			/**
			 * @param {Object} date
			 * 时间选择
			 */
			onConfirmTime(date) {
				this.timeShow = false;
				if (this.timeSelectType === 'startTime') {
					this.subParam.overhaulConfirmStartTime = moment(date).format('YYYY-MM-DD HH:mm')
				} else {
					this.subParam.overhaulConfirmEndTime = moment(date).format('YYYY-MM-DD HH:mm')
				}
				if (this.subParam.overhaulConfirmEndTime && this.getTime(this.subParam.overhaulConfirmEndTime) < this
					.getTime(this.subParam.overhaulConfirmStartTime)) {
					this.subParam.overhaulConfirmEndTime = ''
					Toast('计划结束时间不能早于计划开始时间')
				}
				this.subParam.overhaulConfirmTime =
					`${this.subParam.overhaulConfirmStartTime},${this.subParam.overhaulConfirmEndTime}`
				// if (date.length > 1) {
				// 	const [start, end] = date;
				// 	this.subParam.overhaulConfirmTime = `${this.formatDate(start)} - ${this.formatDate(end)}`;
				// } else {
				// 	const [start] = date;
				// 	this.subParam.overhaulConfirmTime = this.formatDate(start);
				// }
			},
			formatDate(date) {
				return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
			},
			getTime(time) {
				let date = new Date(time)
				return date.getTime()
			},
			/**
			 * @param {Object} value
			 * 实施条件选择
			 */
			onConfirmImplementingCondition(obj) {
				this.subParam.overhaulConfirmResult = obj.value;
				this.subParam.overhaulConfirmResultName = obj.name
				this.showPicker = false;
				if (this.subParam.overhaulConfirmResult == "0") {
					this.subParam.overhaulConfirmStartTime = ''
					this.subParam.overhaulConfirmEndTime = ''
				} else {
					this.subParam.overhaulConfirmStartTime = this.setpList[0].selectworkinfo.workPlanStrtime
					this.subParam.overhaulConfirmEndTime = this.setpList[0].selectworkinfo.workPlanEndtime
				}
			},
			/**
			 * 通知上一个页面刷新数据
			 */
			back() {
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2] //上一个页面
				prevPage.isRefresh = true
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		background-color: #f2f6fa;

		.app-content {
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;
			box-sizing: border-box;

			.content {
				flex: 1;
				flex-direction: column;
				overflow-y: scroll;
				padding: 0 px2vh(30) px2vh(30) px2vh(30);
				box-sizing: border-box;

				.content-steps {
					background-color: #FFFFFF;
					border-radius: px2vh(20);
					padding: px2vh(30);
				}

				.information {
					width: 100%;
					height: auto;

					.information-list {
						display: flex;
						justify-content: space-between;
						border-bottom: 1px solid #E5E5E5;
						padding: px2vw(50) 0;
						box-sizing: border-box;

						text:nth-child(1) {

							font-size: px2vw(38);
							line-height: px2vw(62);
							color: #666666;
						}

						text:nth-child(2) {
							flex: 1;
							font-size: px2vw(38);
							text-align: right;
							word-break: break-all;
							padding-left: px2vw(100);
							color: #333333;
						}
					}

					.information-list:last-child {
						border-bottom: 0px solid #E5E5E5;
					}
				}

				.information-data {
					background-color: #FFFFFF;
					padding: 0 px2vw(30);
					border-radius: px2vw(20);
				}
			}

			.content-img-title {
				font-size: px2vh(40);
				color: #666666;
				line-height: px2vh(62);
			}

			.content-title {
				font-size: px2vw(40);
				font-weight: bold;
				line-height: px2vw(54);
				color: #666666;
				padding: px2vw(50) 0 px2vw(30) 0;
			}

			.sub-btn-container {
				display: flex;
				align-items: center;
				justify-content: center;
				height: px2vw(200);

				.submit-btn {
					margin: 0 px2vw(30);
					border-radius: px2vw(20);
				}
			}
		}

		.popup {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			padding: px2vw(58);

			span {
				font-size: px2vw(40);
			}

			.popup-top {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				position: relative;
				color: #417ADC;
				text-align: center;

				.van-icon {
					position: absolute;
					right: 0;
					color: #000000;
				}

				.popup-title {
					color: #417ADC;
				}
			}


			.popup-notes {
				font-size: px2vh(36);
				line-height: px2vh(62);
				color: #666666;
				opacity: 0.7;
				padding-bottom: px2vh(80);
			}

			.popup-bt {
				width: 100%;

				.submit-btn {
					border-radius: px2vw(100);
				}

			}



			.remark-info-container {
				width: 100%;
				font-size: px2vw(42);
				color: #666666;
				border-radius: px2vw(20);
				overflow: hidden;
				background-color: #FFFFFF;
				margin-top: px2vh(40);
				margin-bottom: px2vh(40);

				.remark-wrap {
					height: px2vw(280);
					background-color: #F7F7F7;
					border-radius: px2vw(20);

					.van-field {
						background-color: #F7F7F7;
						border-radius: px2vw(20);
					}

					.remark-text {
						height: px2vh(150);
					}
				}

			}

			.van-field {
				padding-top: px2vh(63);
				padding-bottom: px2vh(63);
			}
		}

	}
</style>
